<template>
  <!--  items-start表示同一行顶部对齐，self-stretch表示自适应宽度，relative表示相对定位 -->
  <div class="flex items-start self-stretch relative" @click="handleClick">
    <!-- flex-col表示元素垂直方向排列 -->
    <div class="flex flex-col relative py-4 z-10 text-white font-medium ob-drop-shadow cursor-pointer">
      <span class="flex text-3xl" v-if="websiteConfig.name">
        {{ websiteConfig.name }}
      </span>
      <!-- animation-text表示文字闪烁 -->
      <span v-else class="flex text-3xl animation-text">LOADING</span>
      <span class="font-extrabold text-xs uppercase">
        {{ websiteConfig.englishName || 'BLOG' }}
      </span>
    </div>
    <img class="logo-image" :src="websiteConfig.logo" alt="logo">
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { computed } from '@vue/reactivity'
import { useAppStore } from '@/store/app'
import { useCommonStore } from '@/store/common'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'Logo',
  setup() {
    const appStore = useAppStore();
    const commonStore = useCommonStore();
    const router = useRouter();
    const handleClick = () => {
      router.push({ path: '/' })
    }
    return {
      websiteConfig: computed(() => {
        return appStore.websiteConfig
      }),
      handleClick
    }
  }
})

</script>

<style lang="scss" scoped>
.logo-image {
  height: 200px;
  width: 200px;
  max-width: 200px;
  top: -60px;
  left: -60px;
  opacity: 0.05;
  @apply absolute mr-2 rounded-full;
}

//.mr-2 {     margin-right: 0.5rem /* 8px */; }
</style>